<template>
  <div class="flex flex-col">
    <!-- 基础信息区域 -->
    <div class="border border-gray-200 rounded-md p-5 mb-5">
      <div class="flex mb-4">
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Alert code</span>
          <span class="font-medium">{{ alertDetail.alertCode }}</span>
        </div>
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Alert name</span>
          <span class="font-medium">{{ alertDetail.alertName }}</span>
        </div>
      </div>

      <div class="flex mb-4">
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Device name</span>
          <span class="font-medium">{{ alertDetail.deviceName }}</span>
        </div>
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">SN</span>
          <span class="font-medium">{{ alertDetail.sn }}</span>
        </div>
      </div>

      <div class="flex mb-4">
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Faulty module</span>
          <span class="font-medium">{{ alertDetail.faultyModule }}</span>
        </div>
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Device model</span>
          <span class="font-medium">{{ alertDetail.deviceModel }}</span>
        </div>
      </div>

      <div class="flex">
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Occurrence time</span>
          <span class="font-medium">{{ alertDetail.occurrenceTime }}</span>
        </div>
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">Recovery time</span>
          <span class="font-medium">{{ alertDetail.recoveryTime || "-" }}</span>
        </div>
      </div>
      <div class="flex mt-4">
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">System name</span>
          <span class="font-medium">{{ alertDetail.systemName || '-' }}</span>
        </div>
        <div class="flex-1">
          <span class="text-gray-500 w-32 inline-block">System ID</span>
          <span class="font-medium">{{ alertDetail.systemId || '-' }}</span>
        </div>
      </div>
    </div>

    <!-- 可能原因 -->
    <div class="border border-gray-200 rounded-md p-5 mb-5">
      <h3 class="section-title">Possible Reason</h3>
      <p class="reason-text">{{ alertDetail.possibleReason || '-' }}</p>
    </div>

    <!-- 处理建议 -->
    <div class="border border-gray-200 rounded-md p-5 mb-5">
      <h3 class="section-title">Suggestion</h3>
      <template v-if="(alertDetail.suggestions && alertDetail.suggestions.length)">
        <ol class="suggestion-list">
          <li v-for="(suggestion, index) in alertDetail.suggestions" :key="index">
            {{ suggestion }}
          </li>
        </ol>
      </template>
      <template v-else>
        <span>-</span>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { AlertItem } from "../data";

const props = defineProps<{
  alertDetail: AlertItem;
}>();

// 如果需要额外的计算属性可以在这里添加
const statusText = computed(() => {
  return props.alertDetail.status === "active" ? "Active" : "Resolved";
});

// 如果需要向父组件传递事件可以在这里定义
const emit = defineEmits(["action"]);

// 定义任何其他需要的方法
</script>

<style scoped>
/* 标题样式贴近UI图 */
.section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.reason-text {
  margin: 0;
  line-height: 22px;
  white-space: pre-wrap;
}

/* 有序列表样式为 1. 2. 3. 且每项分行 */
.suggestion-list {
  padding-left: 18px;
  margin: 0;
  list-style-type: decimal;
}
.suggestion-list > li {
  margin-bottom: 8px;
  line-height: 22px;
}
</style>
